<template>
	<view class="page">
		<view class="logo" style="background-color: #fff;">
			<image class="logo-image" src="../../static/images/xiaoyu_mall_logo.png" mode="widthFix"></image>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for="item in imgSrcList" :key="item.id">
				<image class="swiper-image" :src="item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商家信息 -->
		
		<swiper class="swiper" :autoplay="false" :interval="5000" :duration="500">
			<swiper-item class="swiper-item" v-for="(group, index) in supplierGroups" :key="index">
				<view class="group">
					<view v-for="(merchant, subIndex) in group" :key="subIndex" class="merchant-item">
						<view class="merchant-info">
							<image :src="merchant.avatar" class="logo" @click="enteringStore(merchant.id)">
							</image>
							<text>{{ merchant.name }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		
		<div class="daily_recommendations">
			<div class="recommendations">每日推荐</div>

		</div>
		
		<div v-for="commodity in commodityList" :key="commodity.id" class="main-box">
		    <u-row gutter="16" >
		        <u-col span="4">
		            <image :src="commodity.img1" alt="product image" mode="aspectFit" style="width: 230rpx; height: 300rpx;" />
		        </u-col>
		        <u-col span="8">
		            <div>
		                <h3>{{ commodity.name }}</h3>
		            </div>
		            <div>{{ commodity.describe }}</div>
		            <div class="price">价格:{{ commodity.price }}￥ &nbsp; 数量：{{ commodity.inventory }}</div>
		            
		            <p style="font-size: 0.7em;">
		                <svg t="1711104441686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5436" width="16" height="16">
		                    <path d="M737.371884 214.39681v-214.39681h-262.891326A436.961117 436.961117 0 0 0 37.519442 436.961117v583.976071H978.823529V399.696909z m-102.093718 704.44666H139.613161V436.961117A335.122632 335.122632 0 0 1 474.480558 102.093719h160.797608z m241.451645 0H741.710867V345.587238l136.039881 104.390828z" p-id="5437" fill="#707070"></path>
		                    <path d="M310.109671 573.000997h206.229312v102.093719h-206.229312zM310.109671 364.219342h206.229312v102.093719h-206.229312z" p-id="5438" fill="#707070"></path>
		                </svg> 
		                <span class="merchant-name">{{ commodity.merchantName }}</span>
		            </p>
		           <button @click="getById(commodity.id)" class="detail-button">查看详情</button>
		        </u-col>
		    </u-row>
		</div>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				imgSrcList: [{
						id: 1,
						url: '../../static/images/ls_festivity1.png'
					},
					{
						id: 2,
						url: '../../static/images/ls_festivity2.png'
					},
					{
						id: 3,
						url: '../../static/images/ls_festivity3.png'
					},
					{
						id: 4,
						url: '../../static/images/ls_festivity4.png'
					},
					{
						id: 5,
						url: '../../static/images/ls_festivity5.png'
					}
				],
				//商户列表
				supplierGroups: [],
				//商品列表
				commodityList: [],
			}
		},
		created() {
			this.showWelcomeMessage();
			this.getAllSupplier();
			this.getPartOfCommodits();
		},
		methods: {
			enteringStore(id) {
				const url = "/pages/classification/classification?id=" + id;
				this.goto(url);
			},
			/**
			 * 欢迎光临
			 */
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			showWelcomeMessage() {
				uni.showToast({
					title: '你好！',
					icon: 'success',
					duration: 2000
				});
			},
			/**
			 * 查询所有商户
			 */
			getAllSupplier() {
				uni.request({
					url: 'http://localhost:8090/merchant/getAllMerchant',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.suppliers = res.data.data;
						console.log(this.suppliers);
						this.supplierGroups = this.chunkArray(this.suppliers, 3);
						console.log(this.supplierGroups);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			/**
			 * 分割数组为指定大小的子数组
			 */
			chunkArray(array, size) {
				const chunkedArray = [];
				for (let i = 0; i < array.length; i += size) {
					chunkedArray.push(array.slice(i, i + size));
				}
				return chunkedArray;
			},
			/**
			 * 获取首页展示的商品列表
			 */
			getPartOfCommodits() {
				uni.request({
					url: 'http://localhost:8090/commodity/commodity/buyer?number=3',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						// 'token': this.token
					},
					success: (res) => {
						this.commodityList = res.data.data;
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			/**
			 * 根据id查询商品信息
			 */
			getById(id) {
				const url = "/pages/productDetails/productDetails?id=" + id;
				uni.navigateTo({
					url: url,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},

		}
	}
</script>

<style lang="scss">
	.daily_recommendations {
		height: 80rpx;
		background-color: #fff;

		.recommendations {
			color: #ff5500;
			font-weight: bold;
			font-style: italic;
			font-size: 20px;
			text-align: center;
			line-height: 80rpx;
			background-color: #fff;
			height: 80rpx;
			width: 200rpx;
		}

		.right {
			position: relative;
			left: 600rpx;
			bottom: 80rpx;
			// background-color: pink;
			height: 80rpx;
			width: 150rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 12px;
			font-weight: bold;
		}
	}

	.logo {
		margin-top: 0rpx;
		margin-bottom: 20rpx;
		position: relative;
		height: 100rpx;

		.logo-image {
			width: 350rpx;
			position: absolute;
			top: 50%;
			/* 文字顶部距离容器顶部的距离为容器高度的一半 */
			left: 50%;
			/* 文字左侧距离容器左侧的距离为容器宽度的一半 */
			transform: translate(-50%, -50%);
			/* 通过负的50%偏移来实现垂直和水平居中 */
		}
	}

	.swiper-box {
		height: 300rpx;
		background-color: #fff;

		.swiper-image {
			width: 750rpx;
		}
	}

	.swiper {
		background-color: #fff;
		height: 250rpx;
		margin-bottom: 10rpx;

		.swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/* 上下间距均分 */
			height: 100%;
		}

		.group {
			display: flex;
			justify-content: space-between;
			/* 左右间距均分 */
		}

		.merchant-item {
			flex: 1;
			text-align: center;
		}

		.logo {
			width: 50px;
			/* 根据实际需要调整商家 logo 的尺寸 */
			height: 50px;
			margin-bottom: 10px;
			/* 根据实际需要调整商家 logo 和名称的间距 */
		}

		.merchant-info {
			display: flex;
			flex-direction: column;
			/* 垂直排列 */
			align-items: center;
			/* 居中对齐 */
			text-align: center;
			/* 文本居中 */
		}
	}

	.page {
		background-color: #EEEDEB;
		/* 设置页面背景颜色 */
	}

	.main-box {
		background-color: #fff;
		margin-bottom: 10rpx;
		// margin-top: 10rpx;
		// margin-left: 5rpx;
		// margin-right: 5rpx;
		// border-radius: 10px;
	}

	.price {
		color: red;
	}
	/* 在 Vue 组件的 <style> 标签中添加以下样式 */
	.merchant-name {
	    font-size: 1.2em; /* 放大字体 */
	    margin-left: 5px; /* 设置与图标的间距 */
	    vertical-align: middle; /* 垂直居中对齐文字和图标 */
	}
	
	.icon {
	    vertical-align: middle; /* 垂直居中对齐图标 */
	}
	.detail-button {
	    font-size: 12px; /* 设置较小的字体大小 */
	    padding: 2px 10px; 
	    margin-right: 50rpx; /* 确保按钮与容器右侧有一定间隔 */
	    float: right; /* 使按钮靠右浮动 */
	}
	

</style>